<template>
  <el-form :model="pageOptions" size="small" label-position="right" label-width="80px" class="setting-form"
    @submit.prevent>
    <el-collapse v-model="formActiveCollapseNames" class="setting-collapse">
      <el-collapse-item name="1" :title="i18nt('designer.setting.basicSetting')">
        <el-form-item :label="i18nt('designer.setting.pageName')">
          <el-input v-model="pageName" :disabled="pageOptions.name === 'main_ui'" @change="updatePageName" />
        </el-form-item>
        <el-form-item :label="i18nt('designer.setting.pageBgType')">
          <el-radio-group v-model="pageOptions.bgType">
            <el-radio-button :label="i18nt('designer.setting.pageBgTypeColor')" :value="1" />
            <el-radio-button :label="i18nt('designer.setting.pageBgTypeImage')" :value="2" />
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="pageOptions.bgType === 1" :label="i18nt('designer.setting.pageBgColor')">
          <el-input v-model="pageOptions.rgb" style="width: 80%" />
          <el-color-picker v-model="pageOptions.rgb" />
        </el-form-item>
        <el-form-item v-else :label="i18nt('designer.setting.pageBgImage')">
          <el-select v-model="pageOptions.img" placeholder="Select" style="width: 240px">
            <el-option v-for="item in imageList" :key="item.name" :label="item.name" :value="item.name"
              class="pngId-option">
              <span style="float: left">{{ item.name }}</span>
              <el-image :src="item.url" style="width: 100px; height: 100px" />
            </el-option>
          </el-select>
        </el-form-item>
      </el-collapse-item>

      <el-collapse-item name="2" :title="i18nt('designer.setting.codeEditSetting')">
        <el-form-item label="页面代码">
          <el-button type="info" icon="el-icon-edit" plain round @click="editFormEventHandler">
            {{ i18nt('designer.setting.addEventHandler') }}</el-button>
        </el-form-item>
      </el-collapse-item>
    </el-collapse>
  </el-form>
</template>

<script>
import { GET_IMAGE_RESOURCE_LIST, GET_IMAGE_RESOURCE_LIST_RESULT } from '@/designer/event'
import { CHANGE_TAB_LABEL } from '../event'
import * as ELECTRON from '@/electron'

export default {
  name: 'PageSetting',
  props: {
    designer: Object,
    pages: Array,
    pageOptions: {
      type: Object,
      default: () => ({
        bgType: 1,
        bgImage: '',
        rgb: '#FFFFFF',
        opa: 255,
        code: ''
      })
    }
  },
  data() {
    return {
      formActiveCollapseNames: ['1', '2'],

      pageName: this.pageOptions.name,

      bgType: 1,
      imageList: [],

      editorScrollInfo: null
    }
  },
  watch: {
    'pageOptions.name': {
      handler(val) {
        this.pageName = val
      }
    }
  },
  mounted() {
    this.$emitter.on(GET_IMAGE_RESOURCE_LIST_RESULT, (list) => {
      this.imageList = list
    })
    this.$emitter.emit(GET_IMAGE_RESOURCE_LIST)
  },
  methods: {
    updatePageName(pageName) {
      if (!pageName.trim()) {
        this.$message.info(this.i18nt('designer.hint.pageNameRequired'))
        this.pageName = this.pageOptions.name
        return
      }

      if (pageName.trim().startsWith('sub')) {
        this.$message.info('页面名称不能以"sub"开头')
        this.pageName = this.pageOptions.name
        return
      }

      if (this.pages.filter((page) => page.options.name === pageName).length > 0) {
        this.$message.info(this.i18nt('designer.hint.duplicatePageName') + pageName)
        this.pageName = this.pageOptions.name
        return
      }

      this.pageOptions.name = pageName
      this.$.appContext.config.globalProperties.$emitter.emit(CHANGE_TAB_LABEL, this.designer)
    },
    editFormEventHandler() {
      this.$emitter.emit('open-page-code-tab', {
        id: this.designer.id,
        name: this.pageOptions.name,
        content: this.pageOptions.code || '',
        type: 'page-code',
      })
    },
    handlePagePreview() {
      this.$emitter.emit(ELECTRON.CLEAR_DEBUG_LOG)
      this.$emitter.emit(
        ELECTRON.START_PAGE_DEBUG,
        (this.designer && this.designer.options.name) || ''
      )
    }
  }
}
</script>

<style lang="scss" scoped>
.setting-scrollbar {
  .setting-form {
    padding: 0 6px;

    :deep(.el-form-item__label) {
      font-size: 11px;
      overflow: hidden;
      white-space: nowrap;
    }

    :deep(.el-form-item--small.el-form-item) {
      margin-bottom: 10px;
    }

    .pngId-option {
      height: 120px;
      line-height: 120px;
    }

    :deep(.el-) {
      .el-__runway {
        margin-right: 16px;
      }

      .el-slider__input {
        width: 85px !important;
      }
    }

    :deep(.el-select) {
      width: 178px !important;
    }

    .setting-collapse {
      :deep(.el-collapse-item__content) {
        padding-bottom: 6px;
      }

      :deep(.el-collapse-item__header) {
        font-style: italic;
        font-weight: bold;
        font-size: 12px;
        height: 32px;
        line-height: 32px;
      }
    }
  }

  :deep(.el-scrollbar__wrap) {
    overflow-x: hidden;
    /* IE浏览器隐藏水平滚动条箭头！！ */
  }
}
</style>